<template>
    <div style="height: 100%; width: 100%;display: flex;flex-direction: column;">
        <el-table :data="showData" height="85%" style="margin-left: 2%; width: 96%;">
            <el-table-column prop="droneDeviceId" label="实例id"></el-table-column>
            <el-table-column prop="droneDeviceName" label="实例名"></el-table-column>
            <el-table-column prop="droneDeviceSn" label="实例sn"></el-table-column>
            <el-table-column prop="droneDeviceType" label="实例类型"></el-table-column>
            <el-table-column prop="droneModelId" label="型号id"></el-table-column>
            <el-table-column label="密码">
                <template slot-scope="scope" style="display: flex;flex-direction: row; flex-wrap: nowrap;">
                    <el-button @click="handlePass(scope.row)" type="text" size="small">查看</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope" style="display: flex;flex-direction: row; flex-wrap: nowrap;">
                    <el-button @click="handleReject(scope.row)" type="text" style="color: red;"
                               size="small">注销
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-left: 2%;height: 15%;width: 96%;display: flex;justify-content: space-between;align-items: center;">
            <el-button @click="lastpage()" size="small">返回第一页</el-button>
            <el-button @click="nextpage()" size="small">下一页</el-button>
        </div>
    </div>
</template>

<script>
    import webSetInfo from "@/server/webSetInfo";
    import {CommonRequest} from "@/server/request";

    export default {
        data() {
            return {
                showData: [],
                userInfo: {},
                totalNumber: 0,
                droneDeviceState: 1
            }
        },
        mounted() {
            this.userInfo = this.$store.state.userAllInfos;
            if (this.userInfo == null) {
                this.$router.push({
                    path: '/login'
                })
            } else {
                this.getNewInfo()
            }
        },
        methods: {
            handleReject(e) {
                CommonRequest ({
                    url: `${webSetInfo.apiUrl}` + `/device/reject`,
                    method: "post",
                    data: {
                        requestCode: '010',
                        userId: this.userInfo.userId,
                        token: this.userInfo.token,
                        targetDroneDeviceId: e.droneDeviceId,
                        targetDroneDeviceState: 0,
                    },
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    }
                })
                    .then(response => {
                        let data = response.data
                        let result = data.result
                        if (result == 1) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            //重新加载
                            this.lastpage()
                        } else if (result == 0) {
                            this.tokenExpire()
                        } else {
                            this.$message.error("未知错误")
                        }
                    })
            },

            handlePass(e) {
                this.$alert(e.droneDevicePass, 'SHA256加密密码', {
                    callback: action => {
                    }
                });
            },

            getNewInfo() {
                CommonRequest ({
                    url: `${webSetInfo.apiUrl}` + `/device/getModel`,
                    method: "post",
                    data: {
                        userId: this.userInfo.userId,
                        token: this.userInfo.token,
                        beginId: this.totalNumber + 1,
                        droneDeviceState: this.droneDeviceState
                    },
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    }
                })
                    .then(response => {
                        let data = response.data;
                        if (response.code == 200) {
                            if (data.length == 0) {
                                this.$message.error("暂无更多数据")
                            } else {
                                this.loadData(data)
                            }
                        } else {
                            // this.tokenExpire()
                        }
                    })
            },

            //token过期
            tokenExpire() {
                this.$router.push({
                    path: '/login',
                })
            },
            //装载data
            loadData(e) {
                console.log("ssssssssssssssssss")
                this.showData = e
                this.totalNumber += e.length
            },
            //上一页
            lastpage() {
                this.totalNumber = 0
                this.getNewInfo()
            },
            //下一页
            nextpage() {
                this.getNewInfo()
            }
        }
    }
</script>

<style>
</style>
